<template>
	<view>
		<view v-if="isLoading" style="width: 100%;height: calc(100vh);position: absolute;z-index: 10000;">
			<image src="../../../static/icon/loading.png" style="width: 110rpx;height: 110rpx;" class="loading" mode=""></image>
		</view>
		
		<view class="xbox">
			<Back num="true"></Back>
			<view style="margin-left: 156rpx;
    margin-top: -34rpx;">
				<view class="xb-a">
					<view style="font-size: 34rpx;
    margin-right: 60rpx;">{{list.name}}</view>
					<image style="width: 52rpx;height: 26rpx;" src="../../../static/icon/gameicon/bjt.png" mode=""></image>
				</view>
				<view style="font-size: 26rpx;margin: 4px 0px;">{{list.iPhone}}</view>
				<view style="font-size: 24rpx;">{{list.address}}</view>
				<view class="xb-b">
					<view class="x-a">
						<image style="width: 49rpx;height: 49rpx;" src="../../../static/icon/gameicon/Path 01.png" mode=""></image>
						<view style="margin: 0px 68rpx 0px 24rpx;font-size: 24rpx;">默认地址</view>
					</view>
					<view class="x-b" style="font-size: 24rpx;" @click="deleteAddress(list)">删除</view>
				</view>
			</view>
		</view>
		
		<scroll-view class="scroll-box" scroll-y="true" @scroll="scrollEvent">
			<!--可视区域里所有数据的渲染区域-->
			
				<!--单条数据渲染区域-->
				<view class="xbox1" @click="morenAddress(item)" v-for="(item,index) in datalist" :key="item.id">
					
					<view style="margin-left: 156rpx;
				">
						<view class="xb-a">
							<view style="font-size: 34rpx;
				margin-right: 60rpx;">{{item.full_name}}</view>
							<image style="width: 52rpx;height: 26rpx;" src="../../../static/icon/jt.png" mode=""></image>
						</view>
						<view style="font-size: 26rpx;margin: 4px 0px;">{{item.mobile}}</view>
						<view style="font-size: 24rpx;">{{item.address}}</view>
						<view class="xb-b">
							<view class="x-a">
								<image style="width: 49rpx;height: 49rpx;" src="../../../static/icon/gameicon/Path 1844.png" mode=""></image>
								<view style="margin: 0px 68rpx 0px 24rpx;font-size: 24rpx;">默认地址</view>
							</view>
							<view class="x-b" style="color: #fff;font-size: 24rpx;" @click="deleteAddress(item)">删除</view>
						</view>
					</view>
				</view>
				
	
			
		</scroll-view>
		
		<view>
			<button class="btna" @click="comfirm()" v-if="datalist.length!=0">确认选择</button>
			<button class="btnb" @click="AddAddress()">+新增地址</button>
		</view>
	</view>
</template>

<script>
	import Back from '../../../components/BackPage.vue'
	import uniRequest from '@/until/uni-request.js'
	import {mapState} from 'vuex'
	export default {
		components:{
			Back
		},
		created() {
			this.getAddresslist()
			
		},
		computed: {//加载数据过程loading
			    ...mapState(["isLoading"])
			},
		data() {
			return {
				listAll: [], //所有数据
				showList: [], //可视区域显示的数据				
				itemHeight: 200	, //每条数据所占高度
				showNum: 10, //每次加载到可视区域的数量，itemHeight X showNum 要可视区域高度 ，否则页面滚动不了。
				top: 0, //偏移量
				scrollTop: 0, //卷起的高度
				startIndex: 0, //可视区域第一条数据的索引
				endIndex: 0, //可视区域最后一条数据后面那条数据的的索引，因为后面要用slice(start,end)方法取需要的数据，但是slice规定end对应数据不包含在里面	
				
				list:{
					id:'',
					name:'收件人',
					iPhone:'电话',
					address:'地址'
				},
				datalist:[],
			}
		},
		methods: {
			
			deleteAddress(item){
				uniRequest.post('lotteryaddress/lotteryaddress/delete',{"id":item.id}).then((res)=>{
													console.log(res);
		
													this.getAddresslist()
													
												}).catch((err)=>{
													console.log(err);
												});
			},
			morenAddress(item){
				console.log(11);
				this.list.id=item.id
				this.list.name=item.full_name,
				this.list.iPhone=item.mobile,
				this.list.address=item.address
				
			},
			comfirm(){
				
				if(this.datalist.length==0){
				uni.showToast({icon:'none',title:'您还未新增地址'});
					return			
				}else{
					uniRequest.post('lotteryaddress/lotteryaddress/default',{"id":this.list.id}).then((res)=>{
														console.log(res);
														this.datalist=res.data.data.data
														uni.setStorageSync('address',this.list)
														this.getAddresslist()
														uni.navigateTo({
															url: '/pages/HomePage/Largeturntable/Largeturntable'
														});
													}).catch((err)=>{
														console.log(err);
													});
				}
			
			},
			
			//构造2万条数据
			getAllList() {
				for (let i = 0; i < 20000; i++) {
					this.listAll.push(`我是第${i}号佳丽`)
				}
			},
			
			//计算可视区域数据
			getShowList() {
				this.startIndex = Math.floor(this.scrollTop / this.itemHeight); //可视区域第一条数据的索引
				this.endIndex = this.startIndex + this.showNum; //可视区域最后一条数据的后面那条数据的索引
				this.showList = this.listAll.slice(this.startIndex, this
					.endIndex) //可视区域显示的数据，即最后要渲染的数据。实际的数据索引是从this.startIndex到this.endIndex-1
				this.top = this.scrollTop - (this.scrollTop % this.itemHeight); //在这需要获得一个可以被itemHeight整除的数来作为item的偏移量，这样随机滑动时第一条数据都是完整显示的
			},
			
			//区域滚动事件
			scrollEvent(e) {
				this.scrollTop = e.detail.scrollTop
				this.getShowList()
			},
			
			AddAddress(){
				uni.navigateTo({
					url: '/pages/Mypage/ShopAddress/ShopAddress'
				});
			},
			getAddresslist(){
				// this.list.name=this.datalist[0].full_name
			
				uniRequest.post('lotteryaddress/lotteryaddress/list?is_self=true',{
					"pageNum": 1, 
"pageSize": 10 ,
"search": {}
}).then((res)=>{
									console.log(res);
									res.data.data.data.forEach((item,index)=>{
										if(item.is_default==1){
											this.list.name=item.full_name
											this.list.iPhone=item.mobile
											this.list.address=item.address
											this.list.id=item.id
										}
									})
									this.datalist=res.data.data.data
										// console.log(this.datalist[0].full_name);
										
										// this.list.name=this.datalist[0].full_name
										// this.list.iPhone=this.datalist[0].mobile
										// this.list.address=this.datalist[0].address
										// this.list.id=this.datalist[0].id
								}).catch((err)=>{
									console.log(err);
								});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-box {
		height: 300px;
		width: 100%;
		position: relative;
		// border: 1px solid red;
		margin-top: 10rpx;
		box-sizing: border-box;
		// padding-left: 28rpx;
		height: calc(50vh);
	
		.uni-scroll-view-content {
			width: 100%;
			display: flex;
			justify-content: space-around;
			height: 100%;
		}
	}
	.btna{
		background: #fff;
		    height: 128rpx;
		    line-height: 128rpx;
		    border-radius: 106rpx;
		    width: 95%;
				color: rgb(164,133,237);
				margin-top: 24rpx;
				box-shadow: 0px 4rpx 20rpx #9e9e9e2e;
	}
	.btnb{
		background: #fff;
		    height: 128rpx;
		    line-height: 128rpx;
		    border-radius: 106rpx;
		    width: 95%;
				color: rgb(164,133,237);
				margin-top: 24rpx;
				box-shadow: 0px 4rpx 20rpx #9e9e9e2e;
	}
	.xbox1{
		margin: 20rpx 0px;
		color: rgb(204,204,204);
		width: 100%;
		height: 308rpx;
		background-color: #fff;
		// background-image: linear-gradient(rgb(148,113,255),rgb(183,143,253)) ;
		// background-repeat: no-repeat;
		.xb-a{
			display: flex;
			align-items: center;
			padding-top: 46rpx;
		}
		.xb-b{
			display: flex;
			align-items: center;
			margin: 14rpx 0px;
			.x-a{
				display: flex;
				align-items: center;
			}
			.x-b{
				    text-align: center;
				    border-radius: 40rpx;
				    width: 140rpx;
				    height: 40rpx;
				    line-height: 40rpx;
				background: linear-gradient(to right, #A272FC, #DE62D2);
			}
		}
	}
	
		.xbox{
			color: #fff;
			width: 100%;
			height: 308rpx;
			background-image: linear-gradient(rgb(148,113,255),rgb(183,143,253)) ;
			background-repeat: no-repeat;
			.xb-a{
				display: flex;
				align-items: center;
			}
			.xb-b{
				display: flex;
				align-items: center;
				margin: 14rpx 0px;
				.x-a{
					display: flex;
					align-items: center;
				}
				.x-b{
					color: #fff;
					    text-align: center;
					    border-radius: 40rpx;
					    width: 140rpx;
					    height: 40rpx;
					    line-height: 40rpx;
					background: linear-gradient(to right, #A272FC, #DE62D2);
				}
			}
		}
</style>
